<template>
  <div class="box">
    <header>
        <p>限定活动</p>
        <div class="nav" ref="headers" >
            <ul >
                <li v-for="(va,index) in allList" :key='va.title' @click="add(index)" :class="{active:curindex==index}">
                    {{va.title}}
                </li>
            </ul>
        </div>
        <h4 v-if='show'>
                <span>限定活动</span>
                <span v-for="(va,index) in allList" :key='va.title' @click="adding(index)" :class="{addactive:curindex==index}">
                    {{va.title}}
                </span>
        </h4>
        <i class="el-icon-arrow-down" @click='change' :class="{change:flag}"></i>
    </header>
    <main ref="right" @scroll="scrollfn">
      <div class="swiper-container" ref="swiper">
        <div class="swiper-wrapper">
            <div 
                class="swiper-slide"
                v-for="item in banner"
                :key="item"
            >
                <img :src="item" >
            </div>
        </div>
        <div class="swiper-pagination" ref="pagination"></div>
      </div>
      <div class="content" ref="content" v-for="item in list" :key="item.title">
                <h3>{{ item.title }}</h3>
                <div class="card" v-for="val in item.cardList" :key="val.id">
                    <img :src="val.img" alt="">
                    <p>{{ val.name }}</p>
                    <p>¥{{ val.price }}</p>
                    <p>{{ val.count }}</p>
                    <button>+</button>
                </div>
                <div class="goods" v-for="val in item.goods" :key="val.id">
                    <img :src="val.img" alt="">
                    <p>{{ val.name }}</p>
                    <p>¥{{ val.price }}</p>
                    <p>{{ val.count }}</p>
                    <button>+</button>
                </div>
      </div>
    </main>
  </div>
</template>

<script>
import BetterScroll from 'better-scroll'
import axios from 'axios'
import swiper, { Autoplay, Pagination } from 'swiper'
import 'swiper/swiper-bundle.css'
import { mapMutations,mapState} from 'vuex'
swiper.use([Autoplay, Pagination])
export default {
  data(){
    return{
      banner:[],
      allList:[],
      flag:false,
      show:false,
      curindex:0,
      curindex2:0,//h4中span的下标,如果和隐藏之前同步就公用curindex
    }
  },
  computed:{
      ...mapState(['list'])
  },
  methods:{
      ...mapMutations(['getlister']),
    async getbanner() { // 获取轮播图数据
            const res = await axios.post('/banner');
            this.banner = res.data;
    },
    async getlist() { // 获取商品数据
            const res = await axios.post('/list');
            this.allList = res.data;
            this.getlister(res.data);
            // 等dom更新之后执行，等span渲染完成
            this.$nextTick(() => {
                this.listTop = this.$refs.content.map(con => con.offsetTop);
                // console.log(this.listTop);
                setTimeout(() => {
                    this.BS = new BetterScroll(this.$refs.headers, {
                        scrollX: true, // 横滚
                        click: true, // 允许点击
                    })
                }, 0)
            });
    },
    change(){
        this.flag=!this.flag;
        this.show=!this.show;
    },
    add(index){//给li加高亮
        this.curindex=index;
        this.$refs.right.scrollTop = this.$refs.content[index].offsetTop-this.$refs.swiper.offsetTop;
    },
    adding(index){//给h4 中的span加高亮
        this.curindex=index;
        
    },
     scrollfn() {
            // console.log(this.$refs.right.scrollTop, this.listTop)
            this.listTop.forEach((val, index) => {
                // 用当前滚动距离和每一项比较
                if (this.$refs.right.scrollTop > val-this.$refs.swiper.offsetTop) {
                    // console.log(index);
                    this.curindex = index;
                }
            })
        }

  },
   updated() {
        // 等banner有数据在实例化
        if (!this.mySwiper && this.banner.length > 0) {
            this.mySwiper = new swiper(this.$refs.swiper, {
                autoplay: true,
                loop: true,
                pagination: {
                    el: this.$refs.pagination
                }
            })
        }
    },
  mounted(){
    this.getbanner();
    this.getlist();
    // this.$nextTick(() => {
    //         // 存所有con到顶部的距离
    //         this.listTop = this.$refs.content.map(con => con.offsetTop);
    // });
  }
}
</script>

<style lang='scss' scoped>
.box{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
header{
  width: 100%;
  height: 60px;
//   background: gainsboro;
//   display: flex;
//   align-items: center;
  position: relative;
  padding-left: 70px;
  padding-right: 30px;
  line-height: 60px;
  
  .nav{
    //   flex: 1;
    background: white;
    
    // white-space: nowrap;
    //  z-index: -1;
  }
  ul{
    //   overflow: scroll;
        width: 600px;
      display: flex;
      flex-wrap: nowrap;
      li{
        //   flex: 1;
          flex-shrink: 0;
          width: 60px;
          text-align: center;
      }
      .active{
          color: red;
      }
  }
  p{
      width: 70px;
      background: rgb(251, 250, 250);
      font-weight: bold;
      position: absolute;
      left: 0;
     z-index: 9;
  }
  .el-icon-arrow-down{
      width: 30px;
      text-align: center;
      font-size: 30px;
      position: absolute;
      right: 0;
      top: 0;
      background: white;
      line-height: 58px;
      z-index: 99;
      transition: transform .3s linear;
  }
  .change{
      transform: rotate(180deg);
  }
    h4{
        position: absolute;
        // height: 100px;
        top: 0;
        left:0;
        background: white;
        z-index: 999;
        // font-weight: normal;
        margin-right: 30px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        // align-items: center;
        span{
            width: 60px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 14px;
        }
        .addactive{
            color: red;
        }
    }
}
main{
  flex: 1;
  // background: lavender;
  overflow: hidden;
  overflow-y: scroll;
}
.content {
    border-bottom: 5px solid yellowgreen;
    padding: 10px;
    overflow: hidden;
    button {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: red;
        color: #ffffff;
        text-align: center;
        line-height: 30px;
        border: none;
        outline: none;
        font-size: 26px;
    }
}
.card {
    width: 100%;
    padding: 5px;
    background:#eeeeee;
    margin-bottom: 8px;
    border-radius: 5px;
    p{
        font-size: 20px;
    }
}
.goods {
    width: 50%;
    float: left;
    padding: 5px;
    border: 1px solid;
     p{
        font-size: 20px;
    }
}
</style>